<template>
      <div class="chooseSession" ref="chooseSession">
        <div class="title">
          <div class="back-wrapper">
            <back></back>
          </div>
          {{name}}
        </div>
        <refresh v-show="isRefresh"></refresh>
        <alert :title="title" :content="content" :visible="visible" @hidden="_hiddenMaskLayer"></alert>
        <loading v-show="isLoading"></loading>
       <div class="container" ref="container">
         <div class="content">
           <div class="top">
             <div class="cinema-info">
               <h1 class="name">{{name}}</h1>
               <div class="address">
                 <div class="left" @click="$router.push({path:'/cinemaInfo',query:{id:$route.query.id}})">{{address}}</div>
                 <div class="right" @click="$router.push({path:'/location',query:{latitude:latitude,longitude:longitude,cinemaName:name,isRefresh:true}})"></div>
               </div>
               <div class="tags" v-show="featureLabelList.length">
                 <div class="tag" v-for="item in featureLabelList" style="margin-right: 6px">{{item.text}}</div>
               </div>
             </div>
             <div class="special-offers-wrapper">
               <div class="special-offers-list" :class="{loadMore:isLoadMore}" ref="special-offers-list">
                 <div class="special-offers-item" v-for="item in actLabelList" @click="_showMaskLayer(item.desc,item.actName)">
                   <div class="left">
                     <div class="tag">{{item.actLabel}}</div>
                   </div>
                   <div class="right">{{item.actName}}</div>
                 </div>
               </div>
               <div class="load-more" @click="_loadMore">
                 <span class="text">{{!isLoadMore?'加载更多':'点击收起'}}</span>
                 <span class="arrow" :class="{loadMore:isLoadMore}"></span>
               </div>
             </div>
           </div>
           <div class="center">
             <div class="swiper-container swiper1">
               <div class="swiper-wrapper">
                 <div class="swiper-slide" v-for="item in filmList"  :filmId="item.id">
                   <div class="img-box">
                     <img :src="item.posterPicUrl" alt="" width="100%" height="100%">
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <div class="bottom">
             <div class="name">
               {{currentFilm.name}} <span class="count">{{currentFilm.score}}</span>
             </div>
             <div class="time-tab-wrapper" ref="time-tab-wrapper">
               <div class="time-tab-container" :style="{width:btnTimeArr.length*96+'px'}">
                 <div class="time-tab" v-for="(item,index) in btnTimeArr" :class="{isActive:index===current}" @click="current=index">{{item.calendarDesc}}</div>
                 <div class="line" ref="line"></div>
               </div>
             </div>
             <div class="session-list-wrapper swiper-container">
               <div class="session-list-container swiper-wrapper">
                 <div class="table-wrapper swiper-slide" v-for="item in btnTimeArr">
                   <table class="session-list-items">
                     <tr v-for="row in item.movieSessionList">
                       <td>
                         <div class="startTime">{{row.playingTimeDesc}}</div>
                         <div class="endTime">{{row.endTimeDesc}}</div>
                       </td>
                       <td>
                         <div class="type">{{row.filmTypeVersionDesc}}</div>
                         <div class="address">{{row.movieHallName}}</div>
                         <div class="surplus">{{row.remainPercentDesc}}</div>
                       </td>
                       <td>
                         <div class="price">￥{{row.settlePrice}}</div>
                         <div class="original">￥{{row.listingPrice}}</div>
                       </td>
                       <td>
                         <button class="chooseSeat" @click="$router.push({path:'/chooseSeat',query:{movieSessionId:row.id}})">{{row.statusDesc}}</button>
                       </td>
                     </tr>
                   </table>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
      </div>
</template>

<script>
  import back from '../../../components/back/back'
  import BScroll from 'better-scroll'
  import Swiper from 'swiper'
  import alert from '../../../components/alert/alert'
  import {getStorage,setStorage} from "../../../common/js/localStorage";
  import loading from '../../../components/loading/loading'
  import refresh from '../../../components/refresh/refresh'
  import global from '../../../common/js/global'
  let swiper2 = '';
    export default {
        name: "chooseSession",
        data(){
          return{
            isRefresh:false,
            isLoading:false,
            content:'',
            title:'',
            visible:false,
            cinemaName:'',
            name:'',
            address:'',
            actLabelList:[],
            featureLabelList:[],
            isLoadMore:false,
            current:0,
            btnTimeArr:[],
            filmList:[],
            currentFilm:{},
            filmId:0,
            swiperFlag:true,
            latitude:'',
            longitude:'',
          }
        },
        methods:{
          _hiddenMaskLayer(bool){
            this.visible = bool
          },
          _showMaskLayer(content,title){
            this.visible = true
            this.title = title
            this.content = content
          },
          _initBScroll(){
            this.$nextTick(()=>{
              if(!this.scroll){
                let scroll = new BScroll(this.$refs['container'],{
                  click:true,
                  pullUpLoad:{
                    threshold:-50
                  },
                  pullDownRefresh: {
                    threshold: 40,
                    stop: 30
                  }
                })
                scroll.on('pullingDown', () => {
                  this.isRefresh = true
                  setTimeout(()=>{
                    window.history.go(0)
                    scroll.finishPullDown();
                  },600)
                });
                scroll.on('pullingUp',()=>{
                  scroll.refresh()
                  scroll.finishPullUp()

                })
                scroll.scrollTo(0,scroll.maxScrollY)
              }else{
                this.scroll.refresh()
              }
            })
          },
          _initSwiper(index){
            let _this = this
            this.$nextTick(()=>{
              if(swiper2){
                swiper2.destroy(false)
              }
              swiper2 = new Swiper('.session-list-wrapper', {
                autoHeight: true,
                initialSlide:index,
                on:{
                  slideChangeTransitionEnd(){
                    _this.current=this.activeIndex
                    console.log(this.activeIndex)
                    _this._initBScroll()
                  }
                }
              });
            })
          },
          _getCinemaInfo(){
            this.isLoading = true
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                },
                url:global.$host+'/cinemaDetail',
                data:{
                  cinemaId:this.$route.query.id
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  this.isLoading = false
                  let data = res.data.data
                  this.name = data.name
                  this.address = data.address
                  this.actLabelList = data.actLabelList
                  this.featureLabelList = data.featureLabelList
                  this.latitude = data.latitude
                  this.longitude = data.longitude
                }else {
                }
              }else {
              }

            })
          },
          _loadMore(){
            this.isLoadMore = !this.isLoadMore
          },
          _getFilmSession(){
            this.isLoading = true
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo')?getStorage('userInfo').JSESSIONID:''
                },
                url:global.$host+'/chooseMovieSession',
                data:{
                  cinemaId:this.$route.query.id,
                  calendarInt:'',
                  filmId:this.filmId
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                let data = res.data.data
                if(res.data.code===0){
                  this.isLoading = false
                  this.filmList = data.filmList
                }else {
                }
              }else {
              }

            })
          }
        },
        mounted(){
          setStorage('isRefresh',true)
          this.filmId = this.$route.query.filmId
          this._getCinemaInfo()
          this._getFilmSession()
          let scroll = new BScroll(this.$refs['time-tab-wrapper'],{
            scrollX:true,
            click:true,
          })
          this._initBScroll()
        },
        components:{
          'back':back,
          'alert':alert,
          'loading':loading,
          'refresh':refresh
        },
        watch:{
          'btnTimeArr'(){

            this._initSwiper(0)
          },
          'currentFilm'(){
            this.btnTimeArr = this.currentFilm.calendarList
            this.current = 0
            this._initSwiper(0)
          },
          'filmId'(){
            this._getFilmSession()
          },
          'filmList'(){
            let centerIndex = 0
            for(let i = 0;i<this.filmList.length;i++){
              if(this.filmList[i].calendarList){
                centerIndex = i
                this.currentFilm = this.filmList[i]
                break
              }
            }
            if(this.swiperFlag){
              this.$nextTick(()=>{
                let _this = this
                let swiper = new Swiper('.swiper1', {
                  slidesPerView: 4,
                  spaceBetween: 0,
                  centeredSlides:true,
                  slideToClickedSlide:true,
                  initialSlide:centerIndex,
                  loop:true,
                  on:{
                    slideChangeTransitionEnd(){
                      _this.filmId = document.getElementsByClassName('swiper-slide-active')[0].getAttribute('filmId')
                    }
                  }
                });
              })
              this.swiperFlag = false
            }

          },
          'current'(){
            this.$refs['line'].style.left = (this.current)*96 + 'px'
            swiper2.slideTo(this.current)
          },
          'actLabelList'(){
            if(this.actLabelList.length>=2){
              this.$refs['special-offers-list'].style.height = 88+'px'
            }
          },
          'isLoadMore'(){
            if(this.isLoadMore){
              this.$refs['special-offers-list'].style.height = 44*this.actLabelList.length+'px'
            }else {
              this.$refs['special-offers-list'].style.height = 44*2+'px'
            }
          }
        }
    }
</script>

<style scoped lang="stylus">

  .container
    height calc(100% - 42px)
    overflow hidden
  .session-list-container
    padding 24px 0px
    .table-wrapper
      width 100%
    .swiper-slide
      height auto !important
  .session-list-items
    width 100%
    tr
      padding 10px
      &:nth-child(odd)
        background #171718
      td
        padding 10px 0
        text-align left
        &:first-child
          padding-left 10px
        &:last-child
          position relative
          text-align right
          padding-right 10px
          width 45px
        .startTime,.type,.price
          height 22px
          line-height 22px
          color #ffffff
          font-size 16px
        .endTime,.address,.surplus,.original
          height 16px
          line-height 16px
          color #8B929E
          font-size 11px
        .price
          color #F7C20F
        .original
          text-decoration:line-through
        .chooseSeat
          position absolute
          top calc(50% - 14px)
          right 10px
          border none
          outline none
          background #F7C20F
          color #161719
          border-radius 14px
          height 28px
          width 56px
          vertical-align center
  .swiper-slide
    position relative
    height 170px
    text-align center
    padding 0
    .img-box
      position relative
      top 34px
      margin 0 auto
      width 70px
      height 102px
      background #7f7f7f
      transition height 0.2s
    &.swiper-slide-active
      .img-box
        top 23px
        width 85px
        height 124px
        transition height 0.2s
        border 1px solid #adadad
  .chooseSession
    height 100%
    color #ffffff
    background #101011
    position absolute
    width 100%
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      overflow-x hidden
      .top
        background #171718
        padding 10px 10px 8px 10px
        text-align left
        margin-bottom 10px
        .name
          height 22px
          line-height 22px
          font-size 16px
        .address
          display flex
          /*padding-right 10px*/
          height 26px
          line-height 26px
          font-size 12px
          color #8B929E
          .left
            flex 1
            border-right 1px solid #323537
            background url("arrow_right.svg") no-repeat calc(100% - 10px) center/6px 12px
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
          .right
            flex 0 0 41px
            background url("icon_Shape.svg")no-repeat 17px center/16px 20px
        .tags
          height 15px
          margin-top 6px
          .tag
            display inline-block
            height 13px
            border 1px solid #8B929E
            font-size 10px
            padding 1px 3px
            color #8B929E
            border-radius 2px
            line-height 13px

        .special-offers-wrapper
          margin-top 10px
          .special-offers-list
            overflow hidden
            height 88px
            transition height 0.5s
            &.loadMore
              height 132px
              transition height 0.5s
            .special-offers-item
              height 44px
              line-height 44px
              font-size 0
              background url("arrow_right.svg")no-repeat 100%/6px 12px
              .left,.right
                display inline-block
                vertical-align bottom
              .left
                position relative
                height 100%
                .tag
                  position relative
                  top 14px
                  padding 0 2px
                  line-height 13px
                  color #F7C20F
                  font-size 10px
                  height 13px
                  border-radius 7px
                  border 1px solid #F7C20F
              .right
                font-size 14px
                color #ffffff
                height 100%
                padding-left 11px
                background url("arrow_right.svg")no-repeat center/6px 12px

          .load-more
            height 32px
            line-height 32px
            color #51555C
            text-align center
            font-size 12px
            .text
              height 12px
              display inline-block
              line-height 12px
            .arrow
              padding 0
              margin 0
              display inline-block
              height 12px
              width 12px
              background url("arrow_bottom.svg") no-repeat center /12px 5px
              transform rotate(0deg)
              transition transform 0.5s
              &.loadMore
                transform rotate(180deg)
                transition transform 0.5s


      .center
        background #171718
      .bottom
        .name
          padding 14px
          font-size 16px
          height 22px
          line-height 22px
          .count
            height 20px
            line-height 20px
            display inline-block
            color #F7C20F
            vertical-align bottom
        .time-tab-wrapper
          height 25px
          margin 0 10px
          overflow hidden
          font-size 0
          text-align left
          .time-tab-container
            position relative
            width 487px
            height 25px
            .time-tab
              text-align center
              height 22px
              line-height 22px
              padding-bottom 4px
              display inline-block
              color #8B929E
              font-size 14px
              width 73px
              padding-right 23px
              &.isActive
                color #F7C20F
              &:last-child
                padding-right 0
            .line
              position absolute
              z-index 1000
              bottom 0
              left 0
              transition left 0.2s
              margin 0 15px
              height 2px
              width 40px
              background #F7C20F
              border-radius 1px
</style>
